"use client"
import { useState } from "react";
import baseService from "@/service/baseService";
import Loader from "@/components/Loader";
import { useRouter } from "next/navigation";

export default function Home({searchParams}) {
    console.log(searchParams.source)
    const router = useRouter();
    

    const features = [
        {
            title: '独立车位',
            content: "一人一位、可自定义PIN码，独立观影记录，更好培养自己的观影行为，得到奈飞优质推荐。",
            icon: "/3dicon/3d-fluency-lock.png"
        },
        {
            title: '高级会员',
            content: "无广告内容，最佳视频画质：超高清 (4K) 和 HDR。提供空间音频。",
            icon: "/3dicon/3d-fluency-vip.png"
        },
        {
            title: '全设备支持',
            content: "支持AppleTV、电视棒、手机、电脑、电视、平板、Ps5、XBox等所有设备登陆。",
            icon: "/3dicon/3d-fluency-hdtv.png"
        },
        {
            title: '专业服务',
            content: "全功能自助、密码查询、PIN码设置，同户验证均可自助完成，更有专业人工客服为您保驾护航，提供专业知识帮助、使用技巧等，给您尊贵体验",
            icon: "/3dicon/3d-fluency-man-and-woman.png"
        },

    ]

    const questions = [
        {
            id: 1,
            title: "购买后如何登陆奈飞?",
            content: (
                <>
                    购买后您可以在<a className="mya" href="https://ok123">我的订阅</a>查看您的账号信息，同时我们也会通过短信、邮件的防止发送信息到您的联系方式！
                </>
            )
        },
        {
            id: 2,
            title: "如何设置高清画质、语言、字幕、还有PIN码?",
            content: (
                <ol>
                    <li>1、登陆奈飞</li>
                    <li>2、点击账户设置</li>
                    <li>3、下找到您的专属车位并点击</li>
                    <li>4、在该页面，您可以完成所有车位信息的设置</li>
                </ol>
            )
        },
        {
            id: 3,
            title: "为什么我想看的电影找不到?",
            content: (
                <ol>
                    <li>1、请确认该电影是否是奈飞的版权</li>
                    <li>2、请确认该电影是否下架</li>
                    <li>3、如果1、2两点都没问题，那么请更换地区，因为每个地区的片源不同</li>
                </ol>
            )
        },
        {
            id: 4,
            title: "同户验证怎么自助处理?",
            content: (
                <>
                    购买后您可以在<a className="mya" href="https://ok123.shop/mine/sub">我的订阅</a>, 点击查看账号，处理同户验证
                </>
            )
        },
    ]




    const [ actQuestion, setActQuestion ] = useState(0);

    function setActQuestionHandler(item){
        let id = actQuestion == item.id ? 0 : item.id;
        setActQuestion(id);
    }

    const [ loading, setLoading ] = useState(false);
    const [ account, setAccount ] = useState("");
    const [ errorMsg, setErrorMsg ] = useState("");

    async function subHandler(){
        setErrorMsg("")
        const phoneRegex = /^1[3-9]\d{9}$/;
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        const testResult = phoneRegex.test(account) || emailRegex.test(account);
        if(!testResult){
            setErrorMsg("无效的手机或邮箱")
            return
        }
        setLoading(true);
        let result = await baseService.register({username: account, source:searchParams.source || "GOOGLE"});
        setLoading(false);
        if(!result.success){
            setErrorMsg(result.msg);
            return
        }
        window.localStorage.setItem("USERNAME",account);
        window.localStorage.setItem("TOKEN",result.data);
        router.push('/sub');

    }


    return (
        <main className="relative w-full h-full text-white">
            <div className="absolute top-0 left-0  w-full h-2/3 lg:h-4/5  -z-50">
                <div className="ltr absolute w-full h-full"></div>
                <img 
                    src="nf_bg.jpg" 
                    className=" h-full w-full object-cover object-center"
                />
            </div>
            
            <div className=" w-full h-2/3 lg:h-4/5">
                <header className="max-w-7xl w-full h-20  mx-auto flex items-center">
                    <a className="w-32 lg:w-44" href="https://ok123.shop">
                        <img src="Netflix_Logo_PMS.png"/>
                    </a>
                    <div className="flex-1 text-right flex items-center gap-2 w-full justify-end pr-3 xl:pr-0">
                        <select className="h-8 px-3 border border-gray-400 bg-opacity-25 bg-gray-50 rounded w-30 text-white">
                            <option>中文</option>
                            <option>English</option>
                        </select>
                        <a href="https://ok123.shop/login" className="text-white text-sm">登陆</a>
                    </div>
                </header>
                <div className="px-6 md:px-10 flex flex-col justify-center items-center text-white w-full h-full -mt-20">
                    <div className="flex flex-col justify-center items-center gap-4 md:gap-6 lg:max-w-2xl">
                        <h1 className="text-3xl  md:text-4xl lg:text-6xl  font-bold text-center">看不完的电影节目，还有更多精彩内容</h1>
                        <p className="text-md lg:text-xl text-center">奈飞月费最低 <span className="text-red-600 font-bold text-2xl">8.8元</span> 起。</p>
                        <p className="text-md lg:text-xl text-center">请输入您的<a className="mya">手机或邮箱</a>立即加入吧，即刻享受《4k高级会员》</p>
                        <div className=" relative flex flex-col md:flex-row gap-4 md:gap-2 w-full items-center">
                            <input value={account} onInput={e => setAccount(e.target.value)} className="h-12 md:h-14 p-3 md:p-4 border border-gray-400 bg-opacity-25 bg-gray-50 flex-1 w-full rounded" placeholder="请输入 手机/邮箱 开始订阅"/>
                            <p className=" md:absolute left-0 -bottom-8 text-sm text-red-500">{errorMsg}</p>
                            {
                                loading ? 
                                (<button className="bg-red-400 px-6 rounded-md font-bold h-10 md:h-full cursor-progress">
                                    <Loader/>
                                </button>)
                                :
                                (<button className="bg-red-600 px-6 rounded-md font-bold active:bg-red-500 h-10 md:h-full" onClick={e => subHandler()}>开始观影</button>)
                            }
                            
                        </div>
                    </div>

                </div>
            </div>
            <div className="relative h-20 md:h-48 -mt-5 overflow-hidden ">
                <div className="default-ltr-cache-1f97ztc"></div>
            </div>
            <div className="max-w-7xl w-full mx-auto pb-20 px-4">
                <h3 className="text-3xl font-bold mb-10">正在热播</h3>
                <div className="w-full overflow-hidden overflow-x-auto text-nowrap scroll-hide ">
                    {
                        [1,2,3,4,5,6,7,8,9,10].map((item,index) => (
                            <div key={item} className="relative inline-block w-30 h-36 md:w-36 md:h-40  lg:w-40 lg:h-60  mx-4 ">
                                <img className="overflow-hidden rounded-xl h-full " src={`/top10/${item}.webp`}/>
                                <span className="absolute -left-4 bottom-1 text-8xl text-black font-bold text-outline-fallback">{index + 1}</span>
                            </div>
                        ))
                    }
                </div>

                <h3 className="text-3xl font-bold mt-20 mb-10">账号特色</h3>
                <div className=" inline-flex flex-col lg:flex-row gap-4 w-full flex-wrap">
                    {features.map(item => (
                        <div key={item.title} className="ltr2 h-64 min-h-64 flex-1 p-4 !block">
                            <h3 className="text-2xl font-bold mb-3">{item.title}</h3>
                            <p className="text-gray-400">{item.content}</p>
                            <img className="w-20 h-20 absolute bottom-0 right-2 opacity-80" src={item.icon}/>
                        </div>
                    ))}
                </div>

                <h3 className="text-3xl font-bold mt-20 mb-10">常见问题</h3>
                
                {
                    questions.map(item => (
                        <div key={item.id} className="mb-2">
                            <div className="bg-zinc-800 flex items-center p-6 text-white font-bold text-2xl cursor-pointer hover:bg-zinc-700" onClick={e => setActQuestionHandler(item)}>
                                <div className="flex-1">{item.title}</div>
                                <div>+</div>
                            </div>
                            <div className={`bg-zinc-800 p-6 border-t border-black ${actQuestion === item.id ? null : 'hidden'}`}>
                                {item.content}
                            </div>
                        </div>
                    ))
                }
                

             
            </div>
            <div className="px-6 md:px-10 flex flex-col justify-center items-center text-white pb-20">
                <div className="flex flex-col justify-center items-center gap-4 md:gap-6 lg:max-w-2xl">
                    <p className="text-md lg:text-xl text-center">请输入您的<a className="mya">手机或邮箱</a>立即加入吧，即刻享受《4k高级会员》</p>
                    <div className=" relative flex flex-col md:flex-row gap-4 md:gap-2 w-full justify-center items-center h-14">
                        <input value={account} onInput={e => setAccount(e.target.value)} className="h-12 md:h-14 p-3 md:p-4 border border-gray-400 bg-opacity-25 bg-gray-50 flex-1 w-full rounded" placeholder="请输入 手机/邮箱 开始订阅"/>
                        <p className=" md:absolute left-0 -bottom-8 text-sm text-red-500">{errorMsg}</p>
                        {
                            loading ? 
                            (<button className="bg-red-400 px-6 rounded-md font-bold h-10 md:h-full cursor-progress">
                                <Loader/>

                            </button>)
                            :
                            (<button className="bg-red-600 px-6 rounded-md font-bold active:bg-red-500 h-10 md:h-full" onClick={e => subHandler()}>开始观影</button>)
                        }
                    </div>
                </div>
            </div>
            <div className="max-w-7xl w-full mx-auto pb-20 px-4 flex flex-col justify-center items-center gap-4">
                <p>人工客服</p>
                <span className="text-gray-400">09:00 - 23:59</span>
                <img src="https://oss.ok123.shop/ok123/support.png" className="w-40"/>
            </div>


        </main>
    );
}
